<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>${page_title}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				/*background-color: #efeff4;*/
			}
			.add-btn {
			    position: fixed;
			    bottom: 30px;
			    right: 30px;
			    z-index: 999;
			}
			.head-img {
				width: 72px;
				height: 72px;
				border-radius:50px; 
			}
			.head-badge{
				position: absolute;
			    top: 60px;
			    right: 10px;
			    font-size: 8px;
			    line-height: 10px;				
			}
			.head-title{
				font-size: 16px;
			}
			.head-desc{
				font-size: 10px;
			}
			.head-box{
				text-align: center;
				border-right:1px solid #eee;
			}
			.title-box{
				padding-left: 5px;
			}
			.title-icon-box{
				text-align: center;padding-left: 5px;border-right:1px solid #eee;
			}
			.title-icon-box-last{
				text-align: center;padding-left: 5px;
			}
			.title-desc {
				padding-top: 10px;
			}
			.author {
				padding-top: 10px;
				font-size: 12px;
				color: #8f8f94;
			}
			.mui-popover {
				height: 100px;
			}
			.mui-content {
				padding: 10px;
			}			
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a id="back-btn" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">指导</h1>
			<a id="search-btn" class="mui-icon mui-icon-search mui-pull-right"></a>
		</header>-->
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" id="control-item1">
							
						</a>
					
					</div>
				</div>
				<div class="mui-slider-group" style="top:0px">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="table-view-ul-1">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
        <div id="add-btn" class="btn-group dropup add-btn">
        	<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">
            <button class="btn green dropdown-toggle" type="button" data-toggle="dropdown" style="border-radius:30px;height:60px;width:60px;background: #00a8c6;color: #FFFFFF;">
                <i class="mui-icon mui-icon-compose" style="font-size: 36px;"></i>
            </button>
            </a>
        </div>
 		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="/rest/guide/ask" id="ask-btn" >提问</a>
						</li>
						<li class="mui-table-view-cell"><a href="/rest/guide/consult" id="consult-btn">咨询</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
        
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script>
		    
			function likes(id){
			}
			
		    document.getElementById('back-btn').addEventListener('tap',function(){
				location="/rest/cms/index";
		    });
		    
		    document.getElementById('ask-btn').addEventListener('tap',function(){
				mui.openWindow({
					id: 'guideAsk',
					url: '/rest/guide/ask',
					show: {
						aniShow: 'fade-in',
						duration: 300
					},
					waiting: {
						autoShow: false
					}
				});  
		    });
		    
		    document.getElementById('consult-btn').addEventListener('tap',function(){
				mui.openWindow({
					id: 'guideAsk',
					url: '/rest/guide/consult',
					show: {
						aniShow: 'fade-in',
						duration: 300
					},
					waiting: {
						autoShow: false
					}
				});
		    });
		    
		    document.getElementById('search-btn').addEventListener('tap',function(){
				mui.openWindow({
					id: 'guideSearch',
					url: '/rest/guide/search/'+tabId,
					show: {
						aniShow: 'fade-in',
						duration: 300
					},
					waiting: {
						autoShow: false
					}
				});
		    });
		    
			function setListListener(cell){
				cell.addEventListener('tap',function(e){
					var detailId =cell.id;
					mui.openWindow({
						id: 'guideDetail',
						url: '/rest/guide/detail/'+detailId,
						show: {
							aniShow: 'fade-in',
							duration: 300
						},
						waiting: {
							autoShow: false
						}
					});
				});
			}			
			
			function getTimeDiff(date1,date2){
				var date3=date2.getTime()-date1.getTime(); //时间差的毫秒数
				//计算出相差天数
				var days=Math.floor(date3/(24*3600*1000));
				//计算出小时数
				var leave1=date3%(24*3600*1000) ;   //计算天数后剩余的毫秒数
				var hours=Math.floor(leave1/(3600*1000));
				//计算相差分钟数
				var leave2=leave1%(3600*1000);        //计算小时数后剩余的毫秒数
				var minutes=Math.floor(leave2/(60*1000));
				//计算相差秒数
				var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数
				var seconds=Math.round(leave3/1000);
				
				if(days>0){
					return days+"天 ";
				}
				if(hours>0){
					return hours+"小时 ";
				}
				if(minutes>0){
					return minutes+"分钟 ";
				}
				if(seconds>0){
					return seconds+"秒 ";
				}
				
			}
			
			function addDetailHtml(data){
				var imgSrc ="/static/images/noimage.png";
				var desc =data.itemBody;
				var count =1;
				var tag =tags[tabId];
				var userName =data.itemOwn;
				var times =getTimeDiff(new Date(data.itemFirstdate),new Date());
				var see =data.itemSee;
				var like =0;
				var chat =data.itemSys;
				var color ="";

				var userTitle ="家长";
				if(data.itemChar61!=null ){
					imgSrc =data.itemChar61;
				}
				
				if(data.itemBody!=null && data.itemBody.length>40){
					desc =data.itemBody.substr(0,40)+'...';
				}
				
				if(data.itemChar62!=null && data.itemChar62!=""){
					userTitle =data.itemChar62;
				}
				if(data.itemUserType!=null && data.itemUserType!=""){
					userTitle =data.itemUserType;
				}
				if(userTitle!=null){
					color ="mui-badge mui-badge-primary";
					if(userTitle=="专家"){
						//color ="mui-badge mui-badge-warning";
					}
				}
				if(data.itemInt3!=null){
					count =data.itemInt3;
				}
				
				var htmlText =''
				+'<div class="mui-row">'
				+'	<div class="mui-col-xs-4 head-box" >'
				+'		<div class="icon-cycle-large">'
				+'			<img class="head-img" src="'+imgSrc+'" width="72"  style="width: 72px;">'
				+'			<span class="mui-badge head-badge mui-badge-'+color+'">'+userTitle+'</span>'
				+'		</div>'
				+'		<div>'
				+'			<span class="head-title">'+userName+'</span>'
				+'		</div>'
				+'	</div>'
				+'	<div class="mui-col-xs-8 title-box" >'
				+'		<div class="mui-row">'
				+'			<div class="mui-col-xs-6 title-icon-box" >'
				+'				<div class=" icon-clock mui-icon-sm ">'
				+'				<span class="btn-float mui-icon-sm ">'+data.itemChar51+'</span> '
				+'				</div>'
				+'			</div>'
				+'			<div class="mui-col-xs-6 title-icon-box">'
				+'				<div class="icon-eye  mui-icon-sm ">'
				+'				<span class="btn-float mui-icon-sm ">'+count+'</span> '
				+'				</div>'
				+'			</div>'
				+'		</div>'
				+'		<div class="title-desc" >'
				+'			<span>'+desc+'</span>'
				+'		</div>'
				+'	</div>'
				+'</div>';
				
				return htmlText;
			}
		</script>
		<script>
			var tags =["学习问题","生活习惯","性格情绪","人际交往","青春叛逆","其它问题"];
			var tabId = 0; //当前栏目id
			var field = "itemName,itemCa"; //字段
			var sort = "itemLastdate";
			var order = "desc";
			var rows = 30; //每页显示记录数
			var pages = [1]; //当前页
			var totals = [0]; //总记录数
			var mores =[1];
			var keywords ='${keywords}';
			
			function initPage(index){
				pages[index] =1;
				totals[index] =0;
				mores[index] =1;
				keywords ='-1';
			}
			
			mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										addFragment(index, rows, true);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										addFragment(index, rows, true);
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					
					var addFragment = function(index, count, reverse) {
						tabId =index;
						if(mores[index] ==0){//have no more record.
							return;
						}
						var ul =document.getElementById("table-view-ul-"+(index+1));
						var addNode =createFragment(ul, index, rows, true);
						ul.appendChild(addNode);
						
					}
					var removeFragment = function(index) {
						var ul =document.getElementById("table-view-ul-"+(index+1));
						var childs = ul.childNodes;
						for(var i = childs.length - 1; i >= 0; i--) { 
						  ul.removeChild(childs[i]); 
						}
						
					}
					var createFragment = function(ul, index, count, reverse) {
						
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						var param= {
								/*columnid: columnId,*/
								field: field,
								rows: rows,
								page: pages[index],
								sort: sort,
								order: order
						};
						var urls ="/rest/guide/list/"+index+"/"+keywords;
						mui.ajax({
							type:"POST",
					        async: false,
							url: urls,
							data: JSON.stringify(param),
							dataType: "json",
							processData: false,
					        contentType: 'application/json',
							success:function(result){
							if(result.success==true){
						         var guideGrid =result.attributes.guideGrid;
						         if(guideGrid!=null){
										var guideRows =guideGrid.results;
										for (var i = 0; i < guideRows.length; i++) {
											var data =guideRows[i];
											li = document.createElement('li');
											li.className = 'mui-table-view-cell';
											li.id = data.itemId;
											var div =document.createElement('div');
											var htmlText =addDetailHtml(data);
											div.innerHTML =htmlText;
											li.appendChild(div);
											fragment.appendChild(li);
											setListListener(li);
										}
										totals[index] = guideGrid.total;
									if ((pages[index] * rows) >= totals[index]) {
										mores[index] =0;
									} else {
										pages[index]++;
										mores[index] =1;
									}
						         }
						     }else{
						     	mui.toast(result.msg);
						     }
							}
						});
				
						return fragment;
					};
					
				    document.getElementById('control-item1').addEventListener('tap',function(){
				    	initPage(0);
				    	removeFragment(0);
						addFragment(0, rows, true);
				    });
				  
					var initRows =function() {
						var type =0;
						addFragment(type, rows, true);
					
					};
					initRows();
				});
				
			})(mui);
			mui('.mui-scroll-wrapper').scroll();
		</script>
	</body>

</html>